<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            position: relative;
            display: flex;
        }
    img { 
        display: table-cell;
        max-width:100%
        }
    .page_hd{
        /* display: flex; */
        position: relative;
    }
    .page_hd h1{
        position:absolute;
        width: 1.8rem;
        right: 0.3552rem;
        bottom: -0.9325rem;
    }
    .name{
        position: absolute;
        font-size: 0.6rem;
        top: 0.03rem;
        left: -1.2rem;
        color: #fff;
    }
    .page_bd{
        position: absolute;
        width: 10rem;
        height: 8.8809rem;
    }
    .Tims_life{
        display: table;
    }
    .Tims_h{
        display: table-cell;
        width: 1.8rem;
        padding-top: 1.776rem;
        padding-left: 0.301rem;
        vertical-align: top;
    }
    .Tims_p{
        display: table-cell;
    }
    .Tim_name{
        /* display: table-cell; */
        font-size: 0.4rem;
        padding-top: 1.776rem;
        padding-left: 0.301rem;
    }
    .Tim_title{
        font-size: 0.3rem;
        padding-top:0.2rem;
        padding-left: 0.301rem;
    }
    .Tim_img{
        padding-top:0.2rem;
        padding-left: 0.301rem;
        width: 6rem;
    }
    .lover{
        display: table;
    }
    </style>
</head>
<body>
    <div class="page">
        <div class="page_hd">
            <h2>
                <img src="./fonts/TimL.jpg" alt="TL">
            </h2>
            <h1>
                <div class="name">Tim</div>
                <a href="#" class="me">
                    <img src="./fonts/TimY.jpg" alt="TY">
                </a>
            </h1>
        </div>
        <div class="page_bd">
            <ul class="Tims">
                <li class="Tims_life">
                    <a href="#" class="Tims_h">
                        <img src="./fonts/TimL.jpg" alt="">
                    </a>
                    <div class="Tims_p">
                        <div class="Tim_name">Tim</div>
                        <div class="Tim_title">朋友圈</div>
                        <div class="Tim_img">
                            <img src="./fonts/TimY.jpg" alt="">
                        </div>
                    </div>
                   
                </li>
            </ul>
           <div>
        <div class="page_ed">
            <ul class="love">
                <il class="lover">
                    <div class="lover_mg">
                        <div class="liver_time">7分钟</div>

                    </div>
                    <div class="lover_name">
                        <i class="iconfont icon-custom-love" style="font-size:20px;color:red"></i>
                    </div>
                </il>
            </ul>
        </div>
    </div>
</body>
</html>